<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>购物车</title>
    <link href="images/logo1.png" rel="shortcut icon" type="image/x-icon"/>
    <link href="css/index-personal.css" rel="stylesheet" type="text/css"/>
    <link href="layui/css/layui.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<div class="head1">
    <div class="layui-row">
        <div class="layui-col-xs1">
            <div class="grid-demo"></div>
        </div>
        <div class="layui-col-xs4">
            <div class="grid-demo grid-demo-bg1">想淘精品好物，就上淘京</div>
        </div>

        <div class="layui-col-xs1">
            <div class="login">
                <div class="grid-demo grid-demo-bg1" id="classifiction_2">
                    <a href="javascript:void(0)" id="login-reg" onclick="logcheck()" style="margin-top: 5px;">登录/注册</a>
                </div>
                <div class="login_check">
                    <div class="userpic"><a href="#"><img src="imgs/购物.png"/></a></div>
                    <div class="userinfo">
                        <div class="username" id="classifiction_2">
                            <a href="javascript:void(0)" id="uname">用户名</a>
                            <h1><a href="javascript:void(0)" onclick="exit()">退出</a></h1>
                        </div>
                        <div class="userid">ID:用户编号:<a href="javascript:void(0)" id="uno">id</a></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="order.html">我的订单</a></div>
        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="javascript:void(0)">我的淘京</a></div>
        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="javascript:void(0)">商家服务</a></div>
        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo" id="classifiction_2"><a href="javascript:void(0)">关于淘京</a></div>
        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo" id="classifiction_2"><a href="javascript:void(0)">企业采购</a></div>
        </div>

    </div>

</div>


<div class="container">
    <div class="head">

        <div class="logo_pic"><a href="#"><img src="images/logo2.png"/></a></div>

        <div class="serch">
            <div class="serch_box"><input name="gname" placeholder="淘入好物，就用淘京" type="text"></div>
            <div class="serch_pic"><a href="index.html"><img src="images/serch.png"/></a></div>
        </div>

    </div>

    <div class="content">

        <div class="content-main">
            <a class="allgoods" href="javascript:viod(0)">
                <ul>
                    <li class="MyGoods">全部商品</li>
                    <li class="GoodsNumber">0</li>
                    <li class="adress">
                        <span>配送至：</span>
                        <button class="detailAdress" type="button">
                            <span>湖南省衡阳市珠晖区湖南工学院</span>
                            <img src="images/向下箭头.png">
                        </button>
                    </li>

                </ul>

            </a>
            <div class="cart-thead">
                <div class="layui-row">
                    <div class="layui-col-md1">
                        <div class="grid-demo grid-demo-bg1" style="margin-left: 5px;">
                            <input class="alls" name="" onclick="isSelected(this)" type="checkbox" value=""/>
                            <span class="all">
											  全选
										  </span>
                        </div>
                    </div>
                    <div class="layui-col-md5 g">
                        <div class="grid-demo">商品</div>
                    </div>
                    <div class="layui-col-md2">
                        <div class="grid-demo grid-demo-bg1">单价</div>
                    </div>
                    <div class="layui-col-md2 num">
                        <div class="grid-demo">数量</div>
                    </div>
                    <div class="layui-col-md1 count">
                        <div class="grid-demo grid-demo-bg1">小计</div>
                    </div>
                    <div class="layui-col-md1">
                        <div class="grid-demo">操作</div>
                    </div>
                </div>
            </div>
            <div class="shop-list">
                <div class="shop-good">
                    <div class="shop-info">
                        <input class="alls" name="" onclick="isSelected(this)" type="checkbox" value=""/>
                        <span class="shop-name">淘京官方旗舰店</span>
                    </div>
                    <div class="item-list">
                        <div class="good-info">
                            <ul class="info-list">
                                <li><input class="single" name="" onclick="Selected(this)" type="checkbox" value=""/>
                                </li>
                                <li>
                                    <div class="info">
                                        <img class="good-cover" src="images/good1.jpg">
                                        <div class="good-introduce">
                                            淘京只卖好货，假一赔百！！全球限量10件 ！抓紧购买！！！
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="good-name">
                                        <span>商品名称</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="good-price">
                                        <span>{{good.price}}</span>
                                        <span class="discount pa">满299元减50活动</span>
                                        <span class="discount">比加入时降了60元</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="good-num">
                                        <button @click="sub(index)" class="sub" style="width: 15px;" type="button">
                                            &minus;
                                        </button>
                                        <input class="num-value" name="num" style="width: 30px;text-align: center;"
                                               type="text" value="1"/>
                                        <button @click="add(index)" class="add" style="width: 15px; " type="button">+
                                        </button>
                                        <span class="balance">有货</span>
                                    </div>

                                </li>
                                <li>
                                    <div class="end-price">
                                        <span>{{good.price}}</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="multiple">
                                        <a href="#">
                                            删除
                                        </a>
                                    </div>

                                </li>
                            </ul>
                        </div>


                    </div>

                    <div class="end1">
                        <div class="layui-row s">
                            <div class="layui-col-md1">
                                <div class="grid-demo grid-demo-bg1" style="margin-left: 5px;">
                                    <input class="alls" name="" onclick="isSelected(this)" type="checkbox" value=""/>
                                    <span class="all">全选</span>
                                </div>
                            </div>
                            <div class="layui-col-md2 ">
                                <div class="grid-demo"><a class="deleteSelected" href="javascript:void(0) "
                                                          style="color: #666;">删除选中商品</a></div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="grid-demo grid-demo-bg1"><a class="deleteAll" href="javascript:void(0) "
                                                                        style="color: #666;">清理购物车</a></div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="grid-demo">已选择<span class="select-num">0</span>件商品</div>
                            </div>
                            <div class="layui-col-md2 ">
                                <div class="grid-demo grid-demo-bg1">总价：<span>￥</span><span class="total"
                                                                                            id="total">0</span></div>
                            </div>
                            <div class="layui-col-md1">
                                <div class="grid-demo" style="margin-left: 5px;"><a class="pay"
                                                                                    href="javascript:void(0)"
                                                                                    onclick="pay()"
                                                                                    onmouseover="style.color='white';">去结算</a>
                                </div>
                            </div>
                        </div>

                    </div>


                </div>

            </div>
        </div>


        <div class="end">
            <div class="layui-row s">
                <div class="layui-col-md1">
                    <div class="grid-demo grid-demo-bg1" style="margin-left: 5px;">
                        <input class="alls" id="" name="" onclick="isSelected(this)" type="checkbox" value=""/>
                        <span class="all">
									  全选
								  </span>
                    </div>
                </div>
                <div class="layui-col-md2 ">
                    <div class="grid-demo"><a class="deleteSelected" href="javascript:void(0) " style="color: #666;">删除选中商品</a>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="grid-demo grid-demo-bg1"><a class="deleteAll" href="javascript:void(0) "
                                                            style="color: #666;">清理购物车</a></div>
                </div>
                <div class="layui-col-md2">
                    <div class="grid-demo">已选择<span class="select-num">0</span>件商品</div>
                </div>
                <div class="layui-col-md2 ">
                    <div class="grid-demo grid-demo-bg1">总价：<span>￥</span><span class="total">0</span></div>
                </div>
                <div class="layui-col-md1">
                    <div class="grid-demo p"><a class="pay" href="javascript:void(0)" onclick="pay()"
                                                onmouseover="style.color='white';">去结算</a></div>
                </div>
            </div>

        </div>

    </div>


    <div class="push">
        <div class="name"><img src="images/push1.png"/></div>
        <div class="push_goods">
            <div class="goods">
                <a href="#"><img src="images/good1.jpg"/></a>
                <p class="gname">岩板大板背景墙 800*2600岩板大板</p>
                <p class="gpics">￥168</p>
            </div>
            <div class="goods">
                <a href="#"><img src="images/good1.jpg"/></a>
                <p class="gname">岩板大板背景墙 800*2600岩板大板</p>
                <p class="gpics">￥168</p>
            </div>
            <div class="goods">
                <a href="#"><img src="images/good1.jpg"/></a>
                <p class="gname">岩板大板背景墙 800*2600岩板大板</p>
                <p class="gpics">￥168</p>
            </div>
            <div class="goods">
                <a href="#"><img src="images/good1.jpg"/></a>
                <p class="gname">岩板大板背景墙 800*2600岩板大板</p>
                <p class="gpics">￥168</p>
            </div>
            <div class="goods">
                <a href="#"><img src="images/good1.jpg"/></a>
                <p class="gname">岩板大板背景墙 800*2600岩板大板</p>
                <p class="gpics">￥168</p>
            </div>

        </div>

    </div>
    <div id="tishi">

        <div class="lei hidden">
            <h1>操作失败！</h1>
        </div>

    </div>


</div>
<div class="footer" id="footer">
    <p> 关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测 | 质量公告 | 隐私政策 | 京东公益 | Media & IR</p>

    <p>京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 药品医疗器械网络服务备案 | 自营医疗器械经营资质 | 药品网络交易第三方平台备案凭证 | 新出发京零 字第大120007号</p>

    <p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2020]6112-1201号 | 违法和不良信息举报电话：4006561155</p>

    <p>Copyright © 2004 - 2023 京东JINGDONG 版权所有 | 消费者维权热线：4006067733 | 经营证照 | 医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号 | 营业执照
        | 增值电信业务经营许可证</p>

    <p>京东旗下网站： 京东钱包 | 京东云 | 网络内容从业人员违法违规行为举报电话：4006561155-3
    </p>


</div>


</body>
<script charset="utf-8" src="js/jquery-3.4.1.min.js" type="text/javascript"></script>

<script charset="utf-8" src="layui/layui.js"></script>
<script src="js/vue.js"></script>

<script>

    window.onload = function () {
        $.get("user?op=check", function (rs) {
            if (rs.code == 601) {//暂未登录
                window.location.href = "login.html";
            }
            if (rs.code == 200) {//登录成功
                var userData = localStorage.getItem('userData');
                if (userData) {
                    userData = JSON.parse(userData);
                    // 然后可以将userData传递给您需要的其他函数或组件进行处理
                    $("#uname").html(userData.uname);
                    $("#uno").html(userData.uno);
                    $("#login-reg").html("欢迎:" + userData.uname);

                }
            }
        }, "json");

    }

    function logcheck() {
        $.get("user?op=check", function (rs) {
            console.log(rs);
            if (rs.code == 601) {//暂未登录
                window.location.href = "login.html";
            }
            if (rs.code == 200) {//登录成功
                //到个人中心
            }
        }, "json");
    }

    function exit() {
        $.get("user?op=exit", function (rs) {
            if (rs == 0) {//注销成功
                $("#uname").html('用户名');
                $("#uno").html('');
                $("#login-reg").html('登录/注册');
                localStorage.removeItem('userData');
                window.location.href = "index.html";

            } else {
                alert('退出失败');
            }
        }, "json");
    }

    function pay() {

        // localStorage.setItem("cno",JSON.stringify(cno));
        // 获取 id 为 "total" 的 span 元素
        const totalSpan = document.getElementById("total");
        // 获取 span 元素的文本内容
        const totalPrice = totalSpan.innerText;
        // 输出文本内容
        location.href = "index.jsp#" + totalPrice;
    }

</script>
<script>

    var userData = localStorage.getItem('userData');
    userData = JSON.parse(userData);
    let uno = userData.uno;

    let gname = '';//搜索的商品名字
    $('.end').hide(); // 使用 jQuery 的 hide 方法隐藏盒子
    start();

    layui.use(function () {
        var carousel = layui.carousel
            , laypage = layui.laypage
            , $ = layui.jquery


        $(document).ready(function () {
            $(window).scroll(function () {
                var documentHeight = $(document).height(); // 文档的总高度
                var scrollTop = $(window).scrollTop(); // 滚动条距离顶部的距离  滚动的位置

                var windowHeight = $(window).height(); // 可视区域高度
                var distanceToBottom = documentHeight - (scrollTop + windowHeight); // 距离底部的距离
                var threshold = 800; // 设置阈值，当距离页面底部小于等于 200 时隐藏盒子元素
                if (distanceToBottom > windowHeight) {
                    $('.end').show(); // 使用 jQuery 的 show 方法显示盒子
                }
                if (distanceToBottom <= threshold) {
                    $('.end').hide(); // 使用 jQuery 的 hide 方法隐藏盒子
                } else {
                    $('.end').show(); // 使用 jQuery 的 show 方法显示盒子
                }
            });
        });

    });

    function sub(element) {
        if (parseInt($(element).next().val()) > 1) {
            var value = parseInt($(element).next().val()) - 1;
            var father = $(element).closest(".info-list");
            var gnameCurrent = father.find(".good-name span").text();
            var total = (parseFloat(father.find(".good-price span").text()) * value).toFixed(2);

            //发送请求给后端修改数量
            $.get("cart", {op: "addnum", uno: uno, number: value, gname: gnameCurrent}, function (rs) {
                if (rs > 0) {
                    father.find(".end-price span").text(total);
                    $(element).next().val(value);
                    Selected();
                } else {
                    // 2秒后隐藏元素
                    $(".lei").addClass("show");
                    $(".lei").removeClass("hidden");
                    setTimeout(function () {
                        $(".lei").removeClass("show");
                        $(".lei").addClass("hidden");

                    }, 1500);

                    console.log("操作失败")
                }
            }, "json");
        }

    }

    function add(element) {
        var value = parseInt($(element).prev().val()) + 1;
        var father = $(element).closest(".info-list");
        var total = (parseFloat(father.find(".good-price span").text()) * value).toFixed(2);


        var gnameCurrent = father.find(".good-name span").text();
        $.get("cart", {op: "addnum", uno: uno, number: value, gname: gnameCurrent}, function (rs) {
            if (rs > 0) {
                father.find(".end-price span").text(total);
                $(element).prev().val(value);
                Selected();
            } else {
// 2秒后隐藏元素
                $(".lei").addClass("show");
                $(".lei").removeClass("hidden");
                setTimeout(function () {
                    $(".lei").removeClass("show");
                    $(".lei").addClass("hidden");

                }, 1500);

                console.log("操作失败")
            }
        }, "json");

        //发送请求给后端修改数量

    }

    //是否全选
    function isSelected(checkbox) {
        var arr = $(".content input");
        var prices = $(".end-price span");
        var numbers = $(".num-value");
        var total = 0;//总计价格
        if (checkbox.checked) {
            for (let i = 0; i < arr.length; i++) {
                arr[i].checked = true;
            }
        } else {
            for (let i = 0; i < arr.length; i++) {
                arr[i].checked = false;
            }
        }
        Selected();
    }

    //单个商品选择
    function Selected() {
        var total = 0;
        var price = 0;
        var checkboxs = $(".single");
        var arr = $(".alls");

        for (let i = 0; i < checkboxs.length; i++) {
            if (checkboxs[i].checked) {
                total += 1;
                //找到本元素的info-list
                var father = $(checkboxs[i]).closest(".info-list");
                price += parseFloat(father.find(".end-price span").text());
                //添加cno到缓存中 uno gdno
                var uno = userData.uno;
                var cno = document.querySelector('.cno').innerText;
                localStorage.setItem('cno', parseInt(cno));
                localStorage.setItem('uno', parseInt(uno));

            }
        }

        $(".total").text(price.toFixed(2));
        $(".select-num").text(total);


        if (total == checkboxs.length) {

            for (let i = 0; i < arr.length; i++) {
                arr[i].checked = true;
            }
        } else {
            for (let i = 0; i < arr.length; i++) {
                arr[i].checked = false;
            }

        }
    }

    //删除选中商品
    function remove(obj) {
        //得到uid在结合gname发送请求给后端
        var goodname = $(obj).closest(".info-list").find(".good-name span").text();
        $.get("cart", {op: "remove", uno: uno, gname: goodname}, function (rs) {
            if (rs > 0) {
                if ($(obj).closest(".good-info").siblings().length == 1) {
                    $(obj).closest(".item-list").prev().remove(); //移除店铺的框
                }
                $(obj).closest(".good-info").remove();
                Selected();

            } else {
                // 2秒后隐藏元素
                $(".lei").addClass("show");
                $(".lei").removeClass("hidden");
                setTimeout(function () {
                    $(".lei").removeClass("show");
                    $(".lei").addClass("hidden");

                }, 1500);

                console.log("操作失败")
            }
        }, "json");
    }


    $(".deleteSelected").click(function () {
        var checkboxs = $(".single");
        for (let i = 0; i < checkboxs.length; i++) {
            if (checkboxs[i].checked) {
                remove(checkboxs[i]);
            }
        }
    });

    $(".deleteAll").click(function () {
        $.get("cart", {op: "deleteAll", uno: 1}, function (rs) {
            if (rs > 0) {
                $(".item-list").prev().remove(); //移除店铺的框
                $(".item-list").remove();
            } else {
                // 2秒后隐藏元素
                $(".lei").addClass("show");
                $(".lei").removeClass("hidden");
                setTimeout(function () {
                    $(".lei").removeClass("show");
                    $(".lei").addClass("hidden");

                }, 1500);

                console.log("操作失败")
            }

        })
    });

    function again(element, gnameCurent) {
        var father = $(element).closest(".info-list");
        var value = parseInt($(element).val());
        $.get("cart", {op: "addnum", uno: uno, number: value, gname: gnameCurent}, function (rs) {
            if (rs > 0) {
                var price = (parseFloat(father.find(".good-price span").text()) * value).toFixed(2);
                father.find(".end-price span").text(price);
                Selected();
            } else {

                // 2秒后隐藏元素
                $(".lei").addClass("show");
                $(".lei").removeClass("hidden");
                setTimeout(function () {
                    $(".lei").removeClass("show");
                    $(".lei").addClass("hidden");

                }, 1500);

                console.log("操作失败")
            }
        }, "json");


        //发送请求给后端
    }

    $(".serch_pic").click(function () {
        gname = $(".serch_box input[name='gname']").val();
        start();
        gname = '';
    })

    function start() {
        $.get("cart", {op: "finds", uno: uno, gname: gname}, function (rs) {
            $(".GoodsNumber").text(rs.count);
            showGoods(rs.data);
        }, "json");
    }

    function showGoods(arr) {
        let isBalance = '';//是否有库存
        let str = '';
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].num > 0) {
                isBalance = '有货';
            } else {
                isBalance = '缺货';
            }

            var gpics = arr[i].gpics;
            if (gpics.indexOf(";") > 0) {
                gpics = gpics.substr(0, gpics.indexOf(";"));
                arr[i].gpics = gpics;
            }


            str += '<div class="good-info" ><ul class="info-list">' +
                '<li> <div class="cno" style="display: none"><span>' + arr[i].cno + '</span></div></li>' +
                '<li><input type="checkbox" name=""  value="" class="single" onclick="Selected()"/></li><li>' +
                '<div class="info"><img class="good-cover" src=' + arr[i].gpics + '><div class="good-introduce">' + arr[i].remark +
                '</div></div></li><li><div class="good-name"><span >' + arr[i].gname + '</span></div>' +
                '</li><li><div class="good-price">' + '￥' + '<span >' + arr[i].gdprice + '</span><span class="discount pa">满299元减50活动</span>' +
                '<span class="discount">比加入时优惠了<span class="reduced">' + (arr[i].gprice - arr[i].gdprice) + '</span>元</span>' +
                '</div></li><li><div class="good-num">' +
                '<button type="button" style="width: 15px;margin-right: 5px;" class="sub" onclick="sub(this)">&minus;</button>' +
                '<input class="num-value"  type="text" style="width: 50px;text-align: center;" name="num" value="' + arr[i].number + '" onblur="again(this,\'' + arr[i].gname + '\')"/> ' +
                '<button type="button" style="width: 15px;margin-left: 3px; "class="add"onclick="add(this)">+</button>' +
                '<span class="balance">' + isBalance + '</span></div></li><li><div class="end-price">' + '￥' +
                '<span >' + arr[i].gdprice * arr[i].number + '</span></div></li><li><div class="multiple"><a href="#" onclick="remove(this)">删除</a>' +
                '</div></li></ul></div>'

        }
        $(".item-list").html(str);

    }


    let sapp = new Vue({
        el: "#tishi",
        data: {},


        methods: {

            //点击显示提示
            getshoppingcart: function (event) {
                //点击提示添加到购物车成功
                // 获取要隐藏或显示的内容元素
                var hiddenContent = document.getElementById('tishi');
                // 获取目标链接元素
                var link = document.getElementById('link');
                // 监听链接的点击事件
                event.preventDefault(); // 阻止链接的默认跳转行为
                hiddenContent.style.display = 'flex'; // 显示隐藏的内容

            },
            closeshoppingcart: function (event) {
                //点击关闭
                // 获取要隐藏或显示的内容元素
                var hiddenContent = document.getElementById('tishi');
                // 获取目标链接元素
                var sure = document.getElementById('isure');
                // 监听链接的点击事件
                event.preventDefault();// 阻止链接的默认跳转行为
                hiddenContent.style.display = 'none'; // 隐藏
            },
            goshoppingcart: function (event) {
                //点击关闭
                // 获取要隐藏或显示的内容元素
                var hiddenContent = document.getElementById('tishi');
                // 获取目标链接元素
                var sure = document.getElementById('isure');
                // 监听链接的点击事件
                event.preventDefault();// 阻止链接的默认跳转行为
                hiddenContent.style.display = 'none'; // 隐藏
            }
        }
    });

</script>
</html>
